<template>
  <div class='home'>
      <!-- banner -->
      <swiper autoplay indicator-dots='true' indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="white" >
        <swiper-item v-for="(value,index) in imgList" :key="index" @click="toAdvert(value.link_url)">
          <img :src="value.img_url" class="slide-image" lazy-load="true" mode="scaleToFill"/>
        </swiper-item> 
      </swiper>
      <!-- banner结束 -->
    <!-- 导航栏 -->
  <!-- <div class="nav">
    <div v-for="(item,index) of classify" :key="index" @click="toAdvert(item.link_url)">
      <img :src="item.img_url" alt="" mode="aspectFill">
    </div>
  </div> -->
   <!-- <div class="home_content"> -->
     <!--<div class="couponList">-->
          <!--<img mode="aspectFill" :src="item.img_url" alt="" v-for="(item,index) of couponList" :key="index" @click="tohomeCoupon(item.id)">-->
        <!--</div>-->
      <!--<div class="c_wrapper">-->
        <!--<div class="coupon">-->
          <!--<navigator url="/pages/creditMail/main">-->
             <!--<img mode="aspectFill" src="../../../static/images/creditshop.jpg" alt="">-->
          <!--</navigator>-->
        <!--&lt;!&ndash; 跳到积分商城吧，年轻人！ &ndash;&gt;-->
        <!--</div>-->
        <!--&lt;!&ndash; 优惠券 &ndash;&gt;-->
        <!--&lt;!&ndash; <div class="coupon">-->
          <!--<navigator url="/pages/coupon/main?type=allCoupon" >-->
            <!--<img src="../../../static/images/coupon.jpg" alt="" mode="aspectFill">-->
          <!--</navigator>-->
        <!--</div> &ndash;&gt;-->
        <!--&lt;!&ndash; 优惠券结束 &ndash;&gt;-->
      <!--</div>-->
      <!-- 广告区 -->
      <!-- <div class="advert">
        <div class="advert_item" v-for="(item,index) of advert" :key="index">
          <img :src="item.img_url" @click='toAdvert(item.link_url)' mode="widthFix" lazy-load="true">
        </div>
      </div> -->
      <!-- 广告区结束 -->

       <!-- 爆款广告区 -->
      <!-- <div class="advert advert1">
        <div class="navBar" style="width:100%">{{advert1Name}}</div>
        <img :src="item.img_url" @click='toAdvert(item.link_url)' mode="widthFix" lazy-load="true" v-for="(item,index) of advert1" :key="index">
      </div> -->
      <!-- 爆款广告区结束 -->

      <!-- 限时特惠区 -->
    <!-- <div class="special">
      <div class="special_item" v-for="(value,index) in newData" :key="index" @click="toGoodsDetail(value.id)">
        <div class="special_item_left">
          <img :src="value.thumb_Url" class="special_item_pic" mode="aspectFill" lazy-load="true">
          <div class="special_item_name">{{value.name}}</div>
        </div>
        <div class="special_item_right">
          <div class="special_item_from">美国原装进口</div>
          <div class="special_item_from">{{value.name}}</div>
          <div class="special_item_des">{{value.info}}</div>
          <div class="special_item_price">到手价:￥{{value.s_price}}</div>
        </div>
      </div>
    </div> -->
    <!-- 限时特惠区结束 -->

    <!-- 推荐商品区 -->
    <!--<div class="introduce">-->
      <!--<div class="navBar" style="width:100%;padding-left:10px">{{goodsListName}}</div>-->
      <!--<div class="introduce_item" v-for="(value,index) in recommendData" :key="index" @click="toGoodsDetail(value.id)">-->
        <!--<img :src="value.thumb_Url" alt="" class="introduce_item_pic" mode="aspectFill" :lazy-load="true">-->
        <!--<div class="introduce_item_name">-->
          <!--<div>{{value.name}}</div> -->
          <!--<div>￥{{value.s_price}}</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <!-- 推荐商品区结束 -->
   <!-- </div> -->
  </div>
</template>

<script>

export default {
  data() {
    return {
      newData:[],
      recommendData:[],
      goodsListName:'',//商品列的标题名
      advert1Name:'',//商品列的标题吗
      advert:'',//普通广告
      advert1:'',//爆款广告
      // imgList:[{img_url:'http://file.rzkeji.com/web/f6/game/1.jpg',path:'/pages/contentHome/main'},{img_url:'http://file.rzkeji.com/web/f6/game/2.jpg',path:''}],
      imgList:'',
      page:0,
      classify:'',
      couponList:''
    }
  },
  methods:{
    async getGoodList(){
      wx.showLoading()
      let res=await this.$request.getData('/goods/getGoodsList',{page:this.page,limit:10,type:'common'})
      // let length=0
      // this.newData=res.data.data.filter((item)=>{  //显示4条新品得商品
      //   if(length<4){
      //     length++;
      //     return item.is_new=='1'
      //   } 
      // })
      // let length1=0
      // this.recommendData=res.data.data.filter((item)=>{  //筛选十条推荐得商品
      //   if(length1<10){
      //     length1++
      //     return item.is_recommend=='1'
      //   }
      // })
      if(res.data.level=='success'){
          this.goodsListName=res.data.show_goods
          res.data.data.forEach((item)=>{
            if(item.is_recommend=='1'){
              this.recommendData.push(item)
            }
        })
        wx.hideLoading()
      }
    },
    async getCoupon(){//获取首页优惠券
      let res=await this.$request.getData('/ucenter/getHomeCoupon')
      if(res.data.level=='success'){
        this.couponList=res.data.data
      }
    },
    async getAdvert(){//获取普通广告
      let res=await this.$request.getData('/other/getAdvertImg')
      if(res.data.level=='success'){
        this.advert=res.data.data
      }
    },
    async getAdvert1(){//获取普通广告
      let res=await this.$request.getData('/other/getAdvertImg',{type:'indulgence'})
      if(res.data.level=='success'){
        this.advert1=res.data.data
        this.advert1Name=res.data.show_goods
      }
    },
    async getBanner(){
      let res=await this.$request.getData('/other/getGameBannerList');
      if(res.data.level=='success'){
        this.imgList=res.data.data;
        wx.stopPullDownRefresh()
      }
    },
    async getClassify(){
      let res=await this.$request.getData('/other/getBannerNavList');
      if(res.data.level=="success"){
        this.classify=res.data.data
      }
    },
      async getMyCoupon(){
          let userToken=wx.getStorageSync('userToken')
          let res=await this.$request.getData('/game/getMyYouCoupon',{
              user_token:userToken
          });
          if(res.data.level=="success"){
              var result=res.data.data
              if(parseInt(result) == 1){
                  wx.navigateTo({url:'/pages/contentYou/main'})
              }
          }
      },
    toGoodsDetail(id){
      wx.navigateTo({url:'/pages/goodsDetail/main?id='+id})
    },
    tohomeCoupon(id){
      wx.navigateTo({url:'/pages/homeCoupon/main?id='+id})
    },
    toAdvert(url){
      console.log(url,777)
      if(url){
        let pattern=/^\/pages/
          if(pattern.exec(url)){
            this.$currency.navigateTo(url)
          }else{
            wx.navigateTo({url:'/pages/advert/main?url='+url})
          }
      }
    }
  },
  // onShow() {
  //   this.getGoodList()
  // },
  // onReachBottom(){
  //   this.page++;
  //   this.getGoodList()
  // },
  // onPullDownRefresh() {
  //   this.page=0;
  //   this.getBanner()
  //   this.getAdvert();
  //   this.getAdvert1();
  //   this.getGoodList()
  //   this.newData=[]
  //   this.recommendData=[]
  //   // Do something when pull down.
  // },
  mounted() {
    // this.$store.state.modulesOrder
    this.getBanner();
    // this.getCoupon();
    // this.getAdvert();
    // this.getAdvert1();
    // this.getGoodList();
    // this.getClassify()    
  },
    onLoad(){
      wx.setStorageSync('toPage','/pages/contentHome/main')
      this.getMyCoupon();
    },
  onShareAppMessage(){
    return {
      title: '全民拉金条',
      desc:'一起来拉金条'
    }
  }
}
</script>

<style scoped>
  .home{
    width:100%;
    min-height: 100%;
    background:#eee;
  }
  .home_content{
    margin:0 5px;
    /* background: #fff; */
  }
  swiper{height: 100vh;width: 100vw;}
.slide-image{width: 100%;height: 100%;}
.c_wrapper{
  display: flex;
  width:100%;
  margin-top:10px;
  background:#eee;
}

  /* 优惠券 */
  .coupon{
    flex:1;
    background:#fff;
    padding:5px 10px
  }
  .coupon> navigator{
    width: 100%;
    height: 100%;
  }
  .coupon img{
    width:100%;
    height: 150px;
    border-radius: 5px;
  }

  /* 广告区 */
  .advert{
    /* padding:10px; */
    margin-top:20px;
  }

  .advert img{
    margin:10px 0;
    width:100%;
  }
  .advert_item{
    margin-bottom: 20px;
    background: #fff;
    /* padding:5px */
  }
  /* 特惠区 */
  .navBar{
    background: #fff;
    display: flex;
    margin-top:-10px;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    font-weight: bold;
  }
  .navBar img{
    width:20px;
    height: 20px;
  }
  .advert1{
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .advert1 img{
    width:48%;
  }
  /* .special{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    align-content: space-around;
  }
  .special_item{
    display: flex;
    width:100%;
    align-items: center;
    font-size: 12px;
    margin-bottom:15px;
    margin-left:20px;
  }
  .special_item_left{
    display: flex;
    flex-direction:column;
    justify-items: center;
    align-items: center;
  }
  .special_item_right{
    height:100%;
    margin-left:30px;
    width:160px;
  }
  .special_item_right>div{
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .special_item_from{
    font-size: 15px;
    font-weight: bold;
    margin:20px 0;
  }
  .special_item_des{
    margin-bottom: 20px;
    color:gray
  }
  .special_item_price{
    color:red
  }
  .special_item_pic{
    width:120px;
    height:120px;
  }
  .special_item_name{
    font-size:10px;
  } */


  /* 推荐商品区 */
  .introduce{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top:20px;
    background: #eee;
  }
  .introduce_item{
    background: #fff;
    width:48%;
    height: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-bottom:15px;
  }
  .introduce_item_pic{
    margin-top:5px;
    width:85%;
    height: 150px;
  }
  .introduce_item_name{
    margin-top:10px;
    width:85%;
    display:flex;
    flex-wrap: wrap;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .introduce_item_name>div:nth-child(2){
    width: 100%;
    margin-top:2px;
    color:red;
  }

  /* 导航栏 */
  .nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width:100%;
    padding:10px 0;
    background:#fff;
  }
  .nav>div{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .nav>div>img{
    width:90px;
    height: 50px;
    margin-bottom:10px;
    border-radius: 5px;
  }


  /* 优惠券列 */
  .couponList{
    margin-top:20px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:10px 10px;
  }
 .couponList img{
      width: 110px;
      height: 60px;
      border-radius: 5px;
    }
</style>
